<template>
  <div class="ym-search">
    <div v-show="options.length > 0">
      <el-input
        size="small"
        v-model="value"
        class="ym-search-value input-with-select"
      >
        <el-select
          slot="prepend"
          v-model="name"
          size="small"
          class="ym-search-key"
        >
          <el-option
            :key="option.value"
            :label="option.label"
            :value="option.name"
            v-for="option in options"
          />
        </el-select>
        <el-button
          slot="append"
          size="small"
          @click="search"
          icon="el-icon-search"
          class="ym-search-submit"
        />
      </el-input>
    </div>
    <div v-show="fields.length > 0">
      <el-button
        size="mini"
        @click="drawer"
        :disabled="open"
      >
        <i class="el-icon-search" />高级搜索
      </el-button>
      <el-drawer
        :visible.sync="open"
        :with-header="false"
        ref="drawer"
      >
        <div class="search-drawer-content">
          <el-form
            :model="query"
            label-width="80px"
            size="mini"
          >
            <ym-form-fields
              :fields="fields"
              v-model="query"
              size="mini"
            />
          </el-form>
          <div class="search-drawer-footer">
            <el-button @click="cancel">
              取 消
            </el-button>
            <el-button
              type="primary"
              @click="handleSearch"
            >
              查 询
            </el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import YmFormFields from '@/ym/components/form/YmFormFields'
export default {
  name: 'YmSearch',
  data () {
    return {
      name: '',
      value: null,
      open: false,
      query: {}
    }
  },
  components: {
    YmFormFields
  },
  methods: {
    search () {
      const vm = this
      if (this.name && this.name !== '') {
        this.$emit('search', {
          [vm.name]: vm.value
        })
      }
    },
    drawer () {
      this.open = true
    },
    handleSearch () {
      // 在这里发送查询
      if (this.query) {
        this.$emit('search', this.query)
      }
      this.$refs.drawer.closeDrawer()
    },
    cancel () {
      this.$refs.drawer.closeDrawer()
    }
  },
  props: {
    options: {
      type: Array,
      default: () => []
    },
    fields: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.ym-search {
  display: flex;
  flex-direction: row-reverse;
}
.ym-search-key {
  /*margin-right: 10px;*/
  width: 80px;
}
/*.ym-search-value {*/
/*  width: 230px;*/
/*}*/
/*.ym-search-submit {*/
/*  margin-left: 10px;*/
/*}*/
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.search-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}

.search-drawer-content form {
  flex: 1;
}
.search-drawer-footer {
  display: flex;
}
.search-drawer-footer button {
  flex: 1;
}
</style>
